import React, { Component } from 'react';

import Header from '../../core/components/header';
import Table from '../../core/components/table';
import { Get } from '../../core/utils/fetch';
import Dialog from '../../core/utils/dialog';
import {
    Link
} from 'react-router-dom';

class Product extends Component {

    render() {
        let columns = [
            { title: '序号', name: 'id' },
            { title: '产品名称', name: 'name' },
            { title: '投资期限(月)', name: 'period' },
            { title: '起投金额(万元)', name: 'startUpNum' },
            { title: '年华收益率', name: 'rate' },
            { title: '操作', render: this.renderOpertion },
        ];
        return (
            <div>
                <Header title="理财产品" subTitle="Money Manage"></Header>
                <Table
                    ref="table"
                    title="理财产品列表"
                    subTitle={<Link to={{ pathname: "/product-edit", query: {} }} className="btn btn-sm btn-primary btn-add">新增</Link>}
                    url="/spi/product/"
                    columns={columns}>
                </Table>
            </div>
        );
    }

    renderOpertion = (dataItem) => {
        return (
            <div>
                <Link to={{ pathname: "/product-edit", search: `?id=${dataItem.id}` }}>编辑</Link>
                {'    '}
                <a onClick={() => this._onDel(dataItem.id)}>删除</a>
            </div>
        );
    };

    _onDel = (id) => {
        Dialog.confirm('你确定要删除吗', () => {
            Get(`/spi/product/del/${id}`)
                .then(() => {
                    this._refresh();
                }, {}, {
                    content: "该产品已经有客户在投资, 无法删除!"
                });
        });
    };

    _refresh = () => {
        this.refs.table.refresh();
    };
}

export default Product;